<section class="page-header">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="breadcrumb">
          <li><a href="#"></a></li>
          <li class="active"></li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <h1>注册</h1>
      </div>
    </div>
  </div>
</section>

<div class="container">

  <div class="row">
    <div class="col-md-12">

      <div class="featured-boxes">
        <div class="row">
          <div class="col-md-12">
            <div class="featured-box featured-box-primary align-left mt-xlg">
              <div class="box-content">
                <h4 class="heading-primary text-uppercase mb-md">注册账号</h4>
                <form [formGroup]="registerForm" (ngSubmit)="register()" novalidate>
                  <div class="row">
                    <div class="form-group">
                      <div class="col-md-6" [class.has-error]="registerForm.get('username').touched && registerForm.hasError('required',['username'])">
                        <label>用户名</label>
                        <input type="text" formControlName="username" [(ngModel)]="user.username" class="form-control input-lg" placeholder="账号">
                        <span class="help-block" [class.hidden]="registerForm.get('username').untouched || !registerForm.hasError('required',['username'])">
                         用户名不能为空
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div formGroupName="passwordsGroup">
                      <div class="form-group">
                        <div class="col-md-3" [class.has-error]="registerForm.get(['passwordsGroup','password']).touched && (registerForm.hasError('minlength',['passwordsGroup',['password']]) || registerForm.hasError('required',['passwordsGroup',['password']]))">
                          <label>密码</label>
                          <input type="password" formControlName="password" [(ngModel)]="user.password" class="form-control input-lg">
                          <span class="help-block" [class.hidden]="registerForm.get(['passwordsGroup','password']).untouched || !registerForm.hasError('required',['passwordsGroup',['password']])">
                            密码不能为空
                          </span>
                          <span class="help-block" [class.hidden]="registerForm.get(['passwordsGroup','password']).untouched || !registerForm.hasError('minlength',['passwordsGroup',['password']])">
                            请至少输入6位数
                          </span>
                        </div>
                        <div class="col-md-3" [class.has-error]="registerForm.get('passwordsGroup').touched && registerForm.hasError('equal', ['passwordsGroup'])">
                          <label>确认密码</label>
                          <input type="password" formControlName="pconfirm" [(ngModel)]="user.pconfirm" class="form-control input-lg">
                          <div [hidden]="!registerForm.hasError('equal', ['passwordsGroup'])">
                            {{registerForm.getError('equal', ['passwordsGroup'])?.description}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group">
                      <div class="col-md-6">
                        <label>邮箱</label>
                        <input type="text" class="form-control input-lg" placeholder="邮箱">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group">
                      <div class="col-md-6">
                        <label>手机号</label>
                        <input type="text" class="form-control input-lg" placeholder="手机号">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group">
                      <div class="col-md-6">
                        <label>密保问题</label>
                        <input type="text" class="form-control input-lg" placeholder="密保问题">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group">
                      <div class="col-md-6">
                        <label>密保答案</label>
                        <input type="text" class="form-control input-lg" placeholder="密保答案">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-3">
                      已有账号<a [routerLink]="['/login']">去登陆</a>
                    </div>
                    <div class="col-md-3">
                      <input type="submit" value="注册" class="btn btn-primary pull-right mb-xl" data-loading-text="请求中...">
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

</div>
